<template>
  <div>
    <!-- 面包屑 -->
    <XtxBreadcrumb>
      <XtxBreadcrumbItem to="/">首页</XtxBreadcrumbItem>
      <XtxBreadcrumbItem
        v-if="category.top"
        :to="`/category/${category.top.id}`"
      >
        {{ category.top.name }}
      </XtxBreadcrumbItem>
      <Transition name="fade-right" mode="out-in">
        <XtxBreadcrumbItem v-if="category.sub">
          {{ category.sub.name }}
        </XtxBreadcrumbItem>
        <!-- <XtxBreadcrumbItem :key="category.sub.id" v-if="category.sub">
          {{ category.sub.name }}
        </XtxBreadcrumbItem> -->
      </Transition>
    </XtxBreadcrumb>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
export default {
  name: 'SubBreadcrumb',
  setup () {
    const store = useStore()
    const route = useRoute()
    const category = computed(() => {
      const cate = {}

      store.state.category.list.forEach(top => {
        if (top.children) {
          const sub = top.children.find(sub => sub.id === route.params.id)

          if (sub) {
            cate.top = {
              id: top.id,
              name: top.name
            }

            cate.sub = {
              id: sub.id,
              name: sub.name
            }
          }
        }
      })

      return cate
    })

    return {
      category
    }
  }
}
</script>
